<template>
  <view class="item" :class="{ 'last-layer': depth === maxDepth - 1 }">
    <view class="flex-be">
      <!-- 用户头像 -->
      <image :src="item.avatar_desc" class="img70" mode="aspectFit"></image>
      <view class="div flex-1 ml15">
        <!-- 用户名和时间 -->
        <view class="color-888 flex-bect">
          <text class="name f24">{{ item.nickname }}</text>
          <text class="time f22">{{ item.createtime_desc }}</text>
        </view>
        <!-- 评论内容及回复按钮 -->
        <view class="intro">
          {{ item.content }}
          <text class="color-primary ml15" @click="handleReply">回复</text>
        </view>
      </view>
    </view>

    <!-- 递归渲染子评论 -->
    <view v-if="depth < maxDepth && item.child && item.child.length > 0">
      <CommentItem
        v-for="child in item.child"
        :key="child.id"
        :item="child"
        :depth="depth + 1"
        :max-depth="maxDepth"
      />
    </view>
  </view>
</template>

<script>
export default {
  name: 'CommentItem',
  props: {
    item: {
      type: Object,
      required: true,
      validator: (value) => {
        return value.id !== undefined && value.content !== undefined
      }
    },
    depth: {
      type: Number,
      default: 0,
      validator: (value) => value >= 0
    },
    maxDepth: {
      type: Number,
      default: 3,
      validator: (value) => value >= 1
    }
  },
  computed:{
    replyId() {
      console.log('---777777777777', this.$store.state.vuex_comment_replyId)
      return this.$store.state.vuex_comment_replyId
    },
  },
  methods: {
    // 处理回复点击事件，通过Vuex更新状态
    handleReply() {
      // 调用Vuex action开始回复流程
      this.$store.dispatch('startCommentReply', this.item)
      console.log('---', this.$store.state.vuex_comment_replyId)
      // // 可选：滚动到评论输入框
      // uni.pageScrollTo({
      //   selector: '.form',
      //   duration: 300
      // })
    }
  }
}
</script>
    
    
<style scoped lang="scss">
.item {
  
  &.last-layer{
    .item{border: none; border-bottom: 1px solid #ededed; margin-bottom: 20rpx;}
  }
  // 子评论向右缩进
  .item {
    margin-left: 85rpx;
  }

  .intro {
    margin-top: 8rpx;
    font-size: 26rpx;
    color: #000;
    margin-bottom: 20rpx;
  }
}
</style>